<template>
  <div class="row q-pa-sm">
    <div class="col">
      <div class="row q-gutter-sm">
        <router-link
          :to="{
            path: '/category/' + item.category.id,
          }"
        >
          <q-chip clickable class="q-mx-none" dense icon="folder" square>
            <span class="text-caption"> {{ item.category.name }} </span>
            <q-tooltip> 分类 </q-tooltip>
          </q-chip>
        </router-link>
        <router-link v-if="item.topic" :to="'/topic/' + item.topic.id">
          <q-chip
            clickable
            icon="bookmark"
            text-color="primary"
            class="cursor-pointer q-mx-none"
            dense
          >
            <span class="text-caption"> #{{ item.topic.name }}# </span>
            <q-tooltip> 话题 </q-tooltip>
          </q-chip>
        </router-link>

        <router-link
          v-for="tag in item.tagInfoList"
          :key="tag.id"
          :to="{
            path: '/tag/' + tag.id,
          }"
        >
          <q-chip icon="tag" clickable class="cursor-pointer q-mx-none" square dense>
            <span class="text-caption">{{ tag.name }}</span>
            <q-tooltip> 标签 </q-tooltip>
          </q-chip>
        </router-link>
      </div>
      <q-item
        class="h-52px column q-pa-none rounded-borders"
        clickable
        :to="{
          path: '/blog/' + item.id,
        }"
      >
        <div class="text-h6 font-500 line-clamp-1">
          {{ item.title }}
        </div>
        <div class="line-clamp-1" :class="$q.dark.isActive ? 'text-grey-5' : 'text-grey-8'">
          {{ item.summary }}
        </div>
      </q-item>
      <div class="row items-center q-gutter-sm text-gray-6">
        <div class="cursor-pointer hover:text-blue-400">
          {{ item.userInfo.username }}
          <q-menu>
            <q-card flat class="text-gray-7 w-240px">
              <q-card-section>
                <div class="row">
                  <q-avatar size="50px">
                    <q-img :src="item.userInfo.avatar" :ratio="1 / 1" />
                  </q-avatar>
                  <q-item
                    class="col rounded-borders"
                    dense
                    :to="{
                      path: '/personal/' + item.userInfo.id + '/create',
                    }"
                  >
                    <q-item-section>
                      <q-item-label>{{ item.userInfo.username }}</q-item-label>
                      <q-item-label caption lines="2">{{ item.userInfo.summary }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
              </q-card-section>

              <q-separator />
              <q-card-section
                class="text-sm row justify-center q-gutter-md text-center stify-around"
              >
                <q-btn
                  flat
                  :to="{
                    path: '/personal/' + item.userInfo.id + '/follow',
                  }"
                >
                  <div>
                    <div>{{ item.userInfo.favUserNum }}</div>
                    <div>关注</div>
                  </div>
                </q-btn>
                <q-btn
                  flat
                  :to="{
                    path: '/personal/' + item.userInfo.id + '/fans',
                  }"
                >
                  <div>
                    <div>{{ item.userInfo.fansNum }}</div>
                    <div>粉丝</div>
                  </div>
                </q-btn>
              </q-card-section>
              <q-card-section
                class="row justify-around"
                v-if="item.userInfo.id != webStore.userInfo.id"
              >
                <q-btn
                  class="w-80px"
                  :color="item.userInfo.followFlag ? 'info' : 'positive'"
                  :label="item.userInfo.followFlag ? '取关' : '关注'"
                  @click="
                    () => {
                      emit('favUser')
                    }
                  "
                />
                <q-btn class="w-80px" color="primary" label="私信" />
              </q-card-section>
            </q-card>
          </q-menu>
        </div>
        <q-btn flat size="xs" icon="fa-regular fa-clock" class="q-pa-none">
          <span class="q-pl-xs text-sm">
            {{ item.relativeTime }}
          </span>
          <q-tooltip> 最后更新时间: {{ item.updateTime }} </q-tooltip>
        </q-btn>
        <q-btn icon="fa-regular fa-eye" flat size="xs" class="q-pa-none">
          <span class="q-pl-xs text-sm">
            {{ item.readNum }}
          </span>
          <q-tooltip> 阅读量 </q-tooltip>
        </q-btn>
        <q-btn flat size="xs" icon="fa-regular fa-comment-dots" class="q-pa-none">
          <span class="q-pl-xs text-sm">
            {{ item.commentNum }}
          </span>
          <q-tooltip> 评论数量 </q-tooltip>
        </q-btn>
        <q-btn
          @click.stop="
            () => {
              emit('articleLiked')
            }
          "
          :icon="item.isStar ? 'favorite' : 'favorite_border'"
          flat
          :color="item.isStar ? 'primary' : ''"
          size="xs"
          class="q-pa-none"
        >
          <span class="q-pl-xs text-sm">
            {{ item.star }}
          </span>
          <q-tooltip> 点赞数量 </q-tooltip>
        </q-btn>
      </div>
    </div>
    <div class="w-140px q-pl-xs row justify-center items-center" v-if="item.articleCover" v-viewer>
      <q-img fit="fill" :ratio="16 / 9" :src="item.articleCover" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar'
import type { ApiType, mainArticleList } from 'src/service/api'
import { useWebStore } from 'src/stores/webStore'

type rowsType = ApiType<typeof mainArticleList>['Return']['rows'][0]

const $q = useQuasar()

defineProps<{
  item: rowsType
}>()
const webStore = useWebStore()
const emit = defineEmits<{
  (e: 'articleLiked'): void
  (e: 'favUser'): void
}>()
</script>

<style scoped></style>
